// 引入 WangEditor 的核心功能

const { createEditor, createToolbar } = window.wangEditor;

document.addEventListener('DOMContentLoaded', () => {
    // 找到后台默认的文本框
    const textarea = document.querySelector('#id_description');

    // 如果找不到文本框，不加载 WangEditor
    if (!textarea) {
        // console.warn('未找到描述字段 #id_description');
        return;
    }

    // 创建一个容器，用于替换文本框
    const editorWrapper = document.createElement('div');
    editorWrapper.id = 'editor-wrapper';

    // 工具栏和编辑器容器
    editorWrapper.innerHTML = `
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
    `;
    textarea.style.display = 'none'; // 隐藏原始文本框
    textarea.parentNode.insertBefore(editorWrapper, textarea);

    // 配置 WangEditor 的功能
    const editorConfig = {
        placeholder: '请输入描述内容...',
        onChange(editor) {
            // 同步内容到隐藏的文本框
            const htmlContent = editor.getHtml();
            textarea.value = htmlContent; // 将内容同步到隐藏的 <textarea>
        },
    };

    // 创建编辑器实例
    const editor = createEditor({
        selector: '#editor-container',
        html: textarea.value, // 预加载内容（如果存在）
        config: editorConfig,
        mode: 'simple', // default simple
    });

    // 创建工具栏实例
    const toolbarConfig = {
        // 如果需要特定配置可以在此调整
    };

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // 默认模式
    });

    console.log('WangEditor 已成功加载');
});
